/* 去掉butotn元素自带的边框  why?*/
button::after {
	border: none;
}

* {
	color: #101010;
	margin: 0;
	padding: 0;
}

/* 复用样式 */

/*布局*/

/* flex布局 */
.layout-flex {
	display: flex;
}

.layout-vh-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.layout-horizontal-center {
	display: flex;
	justify-content: center
}

.layout-horizontal-spacebetween {
	display: flex;
	justify-content: space-between;
}
.layout-horizontal-spacearound {
	display: flex;
	justify-content: space-around;
}
.layout-horizontal-flexend {
	display: flex;
	justify-content: flex-end;
}
.layout-vertical-center {
	display: flex;
	align-items: center;
}
.layout-vertical-flexend {
	display: flex;
	align-items: flex-end;
}
.layout-vertical-flexstart {
	display: flex;
	align-items: flex-start;
}
.layout-flexdirection-colume {
	flex-direction: column;
}
.layout-flexdirection-rowv {
	flex-direction: row-reverse;
}

.layout-alignitems-center {
	align-items: center;
}

.layout-alignitems-fend {
	align-items: flex-end;
}
.layout-aligncontent-spacebetween {
	align-content: space-between;
}

.layout-flexbasis-zero {
	flex-basis: 0%;
}

.layout-flex-one {
	flex: 1;
}

.layout-justifycontent-spacebetween {
	justify-content: space-between;
}

.layout-flexwrap-wrap {
	flex-wrap: wrap;
}

/* 这两个center居中，一般用于视图中的对齐 */
.layout-positionfixed-horizontal-center {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
}

.layout-positionfixed-vertical-center {
	position: fixed;
	top: 50%;
	transform: translateX(-50%);
}

.textalign-center {
	text-align: center;
}

.verticalalign-center {
	vertical-align: middle;
}

.verticalalign-top {
	vertical-align: top;
}

.visibility-hid {
	visibility: hidden;
}


/* 右外边距  5rpx-50rpx 步长：5rpx */
.marginright-micro {
	margin-right: 5rpx;
}

.marginright-tiny {
	margin-right: 10rpx;
}

.marginright-mini {
	margin-right: 15rpx;
}

.marginright-little {
	margin-right: 20rpx;
}

.marginright-small {
	margin-right: 25rpx;
}

.marginright-middle {
	margin-right: 30rpx;
}

.marginright-big {
	margin-right: 35rpx;
}

.marginright-large {
	margin-right: 40rpx;
}

.marginright-huge {
	margin-right: 45rpx;
}

.marginright-vast {
	margin-right: 50rpx;
}
/* 左外边距  5rpx-50rpx 步长：5rpx */
.marginleft-micro {
	margin-left: 5rpx;
}

.marginleft-tiny {
	margin-left: 10rpx;
}

.marginleft-mini {
	margin-left: 15rpx;
}

.marginleft-little {
	margin-left: 20rpx;
}

.marginleft-small {
	margin-left: 25rpx;
}

.marginleft-middle {
	margin-left: 30rpx;
}

.marginleft-big {
	margin-left: 35rpx;
}

.marginleft-large {
	margin-left: 40rpx;
}

.marginleft-huge {
	margin-left: 45rpx;
}

.marginleft-vast {
	margin-left: 50rpx;
}
/* 上外边距  5rpx-50rpx 步长：5rpx */
.margintop-micro {
	margin-top: 5rpx;
}

.margintop-tiny {
	margin-top: 10rpx;
}

.margintop-mini {
	margin-top: 15rpx;
}

.margintop-little {
	margin-top: 20rpx;
}

.margintop-small {
	margin-top: 25rpx;
}

.margintop-middle {
	margin-top: 30rpx;
}

.margintop-big {
	margin-top: 35rpx;
}

.margintop-large {
	margin-top: 40rpx;
}

.margintop-huge {
	margin-top: 45rpx;
}

.margintop-vast {
	margin-top: 50rpx;
}
/* 下外边距  5rpx-50rpx 步长：5rpx */
.marginbottom-micro {
	margin-bottom: 5rpx;
}

.marginbottom-tiny {
	margin-bottom: 10rpx;
}

.marginbottom-mini {
	margin-bottom: 15rpx;
}

.marginbottom-little {
	margin-bottom: 20rpx;
}

.marginbottom-small {
	margin-bottom: 25rpx;
}

.marginbottom-middle {
	margin-bottom: 30rpx;
}

.marginbottom-big {
	margin-bottom: 35rpx;
}

.marginbottom-large {
	margin-bottom: 40rpx;
}

.marginbottom-huge {
	margin-bottom: 45rpx;
}

.marginbottom-vast {
	margin-bottom: 50rpx;
}
/* 左右内边距  5rpx-50rpx 步长：5rpx */
.paddinghorizontal-micro {
	padding-left: 5rpx;
	padding-right: 5rpx;
}

.paddinghorizontal-tiny {
	padding-left: 10rpx;
	padding-right: 10rpx;
}

.paddinghorizontal-mini {
	padding-left: 15rpx;
	padding-right: 15rpx;
}

.paddinghorizontal-little {
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.paddinghorizontal-small {
	padding-left: 25rpx;
	padding-right: 25rpx;
}

.paddinghorizontal-middle {
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.paddinghorizontal-big {
	padding-left: 35rpx;
	padding-right: 35rpx;
}

.paddinghorizontal-large {
	padding-left: 40rpx;
	padding-right: 40rpx;
}

.paddinghorizontal-huge {
	padding-left: 45rpx;
	padding-right: 45rpx;
}

.paddinghorizontal-vast {
	padding-left: 50rpx;
	padding-right: 50rpx;
}

/* 上下内边距  5rpx-50rpx 步长：5rpx */
.paddingvertical-mm {
	padding-top: 2rpx;
	padding-bottom: 2rpx;
}

.paddingvertical-micro {
	padding-top: 5rpx;
	padding-bottom: 5rpx;
}

.paddingvertical-tiny {
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}

.paddingvertical-mini {
	padding-top: 15rpx;
	padding-bottom: 15rpx;
}

.paddingvertical-little {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.paddingvertical-small {
	padding-top: 25rpx;
	padding-bottom: 25rpx;
}

.paddingvertical-middle {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}

.paddingvertical-big {
	padding-top: 35rpx;
	padding-bottom: 35rpx;
}

.paddingvertical-large {
	padding-top: 40rpx;
	padding-bottom: 40rpx;
}

.paddingvertical-huge {
	padding-top: 45rpx;
	padding-bottom: 45rpx;
}

.paddingvertical-vast {
	padding-top: 50rpx;
	padding-bottom: 50rpx;
}

/* 字体大小  12px-22px  没有16px */
.fontsize-micro {
	font-size: 12px;
}

.fontsize-tiny {
	font-size: 13px;
}

.fontsize-mini {
	font-size: 14px;
}

.fontsize-little {
	font-size: 15px;
}

.fontsize-small {
	font-size: 17px;
}

.fontsize-middle {
	font-size: 18px;
}

.fontsize-big {
	font-size: 19px;
}

.fontsize-large {
	font-size: 20px;
}

.fontsize-huge {
	font-size: 21px;
}

.fontsize-vast {
	font-size: 22px;
}

/* 字体粗细  bold */
.fontweight-bold {
	font-weight: bold;
}

.borderadius-circle {
	border-radius: 100px;
}

.fontcolor-gray {
	color: #999;
}

.fontcolor-white {
	color: #fff;
}

.width-full {
	width: 100%;
}